<!DOCTYPE html>

<html lang="zh-cn" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>登记新图书页面</title>
    <!-- 新 Bootstrap4 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">

    <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
    <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>

    <!-- bootstrap.bundle.min.js 用于弹窗、提示、下拉菜单，包含了 popper.min.js -->
    <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>

    <!-- 最新的 Bootstrap4 核心 JavaScript 文件 -->
    <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
    <style>
        body{
            background-image:url("https://img.17sucai.com/upload/55/2013-05-18/884aa4be28287056c7b5d6d075382c51.jpg?x-oss-process=style/big");
        }
        /*h1*/
        /*{*/
        /*    text-align:center;*/
        /*}*/
        /*div{*/
        /*    text-align:center;*/
        /*    width:80%;*/
        /*    margin-top:10%;*/
        /*    margin-left:10%;*/

        /*}*/
    </style>
</head>
<body>
<!--<h1>登记新书界面</h1>-->
<div class="container">
<!--picture_url,name,author,chubanshe,riqi,number-->
    <h1>登记新书界面</h1>
    <ol class="breadcrumb">
        <li class="breadcrumb-item"><a href="list.html" th:href="@{/library/list}">Home</a></li>
        <li class="breadcrumb-item active">add</li>
    </ol>
    <form action="/library/add" method="post" th:action="@{/library/add}" onsubmit="return checkForm()">

        <div class="form-group">
            <label for="picture_url" class="form-label">图书图片url:</label>
            <input type="text" class="form-control is-valid" id="picture_url" name="picture_url">
        </div>
        <div class="form-group">
            <label for="name">图书名称:</label>
            <input type="text" class="form-control is-valid" id="name" name="name">
        </div>
        <div class="form-group">
            <label for="author">图书作者:</label>
            <input type="text" class="form-control is-valid" id="author" name="author">
        </div>
        <div class="form-group">
            <label for="chubanshe">出版公司:</label>
            <input type="text" class="form-control is-valid" id="chubanshe" name="chubanshe">
        </div>
        <div class="form-group">
            <label for="riqi">出版日期:(格式,如2077-07-07)</label>
            <input type="text" class="form-control is-valid" id="riqi" name="riqi">
        </div>
        <div class="form-group">
            <label for="number">库存数量:</label>
            <input type="text" class="form-control is-valid" id="number" name="number">
        </div>
        <button type="submit" class="btn btn-primary">Submit</button>
    </form>

<!--    <button onclick="add()">提交</button>-->
    <script type="text/javascript">
        function checkForm(){
            var x=true;
            var date= new Date();
            //var  = document.getElementById("0").value;;
            var y = date.getFullYear();
            var m = date.getMonth()+1;
            var d = date.getDate();
            var res =y+"-"+m+"-"+d;
            var a=document.getElementById("picture_url").value;
            var b=document.getElementById("name").value;
            var c=document.getElementById("author").value;
            var p=document.getElementById("chubanshe").value;
            var time=document.getElementById("riqi").value;
            var e=document.getElementById("number").value;

            if(!a||!b||!c||!p||!time||!e){
                alert("未输入完全");
                x=false;
            }
            if(time>res){
                alert("出版日期不能晚于当前日期");
                x=false;
            }
            if(e<0){
                alert("库存不能为负数");
                x=false;
            }
            if(x==true)
            {
                //进行增加书目的操作，对数据库修改
                alert("输入格式正确");
            }
            return x;
        }
    </script>
</div>
</body>
</html>
